<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>前台系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="./static/css/font.css">
    <link rel="stylesheet" href="./static/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="./static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./static/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .out-container {
            position: relative;
            color: white;
            height: 150px;
            margin-left: 30px;
            margin-bottom: 30px;
            background-color: #298E56;
            border-radius: 10px;
            transition: all 0.5s linear;
        }

        .out-container:hover .out-container-bg {
            cursor: pointer;
            background-color: rgba(0, 0, 0, 0.4);
            transition: all 0.5s linear;
        }

        .out-container:hover .out-container-bg button {
            display: block;
            width: 100px;
            transition: all 0.5s linear;
        }

        .out-container-bg {
            position: absolute;
            height: 150px;
            top: 0;
            right: 0;
            border-radius: 10px;
            background-color: rgba(0, 0, 0, 0);
            transition: all 0.5s linear;
        }

        .out-container-bg button {
            display: none;
            width: 0px;
            transition: all 0.5s linear;
        }

        .out-container-busy {
            background-color: #D51A21;
        }

        .out-container-book {
            background-color: #F8931D;
        }

        .inner-container {
            margin-top: 20px;
            text-align: center;
        }
    </style>
</head>

<body class="layui-anim layui-anim-up" onload="window.scrollTo(0,0);">
<div class="x-body">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 5px;">
        <legend>大厅</legend>
    </fieldset>
    <div class="layui-row layui-col-space5 out-container-father">
        <c:forEach items="${tableList}" var="table">
            <c:if test="${table.tableType == '大厅'}">
                <c:if test="${table.tableStatus == 0}">
                    <div class="layui-col-md2 out-container out-container-free">
                        <div class="inner-container inner-container-free">
                            <p>${table.tableName}</p><br>
                            <h1>${table.tableCode}</h1><br>
                            <p>容量：${table.tableCapacity}人</p>
                        </div>

                        <c:if test="${CanBook==true}">
                            <div class="layui-col-md12 out-container-bg">
                                <button class="layui-btn layui-btn-normal" STYLE="margin: 25px 84px;"
                                        onclick="x_admin_show('开台','${pageContext.request.contextPath}/foreground?m=setUpTablePage&tableId=${table.tableId}&tableCapacity=${table.tableCapacity}',450,450)">
                                    开台
                                </button>
                                <button class="layui-btn layui-btn-normal" STYLE="margin: 15px 84px;"
                                        onclick="x_admin_show('预约','${pageContext.request.contextPath}/foreground?m=bookTablePage&tableId=${table.tableId}&tableCapacity=${table.tableCapacity}',650,550)">
                                    预约
                                </button>
                            </div>
                        </c:if>

                        <c:if test="${CanBook==false}">
                            <div class="layui-col-md12 out-container-bg">
                                <button class="layui-btn layui-btn-normal" STYLE="margin: 56px 84px;"
                                        onclick="x_admin_show('开台','${pageContext.request.contextPath}/foreground?m=setUpTablePage&tableId=${table.tableId}&tableCapacity=${table.tableCapacity}',450,450)">
                                    开台
                                </button>
                            </div>
                        </c:if>

                    </div>
                </c:if>

                <c:if test="${table.tableStatus == 1}">
                    <div class="layui-col-md2 out-container out-container-busy">
                        <div class="inner-container inner-container-busy">
                            <p>${table.tableName}</p><br>
                            <h1>${table.tableCode}</h1><br>
                            <input type="hidden" class="tableInfoSetUpTime"
                                   value="${table.tableInfo.tableInfoSetupTime}">
                            <span class="totalTime"></span>
                        </div>
                        <div class="layui-col-md12 out-container-bg">
                            <div class="layui-btn-container">
                                <button type="button" class="layui-btn layui-btn-normal" STYLE="margin: 25px 84px;"
                                        onclick="x_admin_show('结账','${pageContext.request.contextPath}/foreground?m=payPage&tableId=${table.tableId}', 610)">
                                    结账
                                </button>
                                <a href="${pageContext.request.contextPath}/foreground?m=orderPage&tableId=${table.tableId}"
                                   target="_blank">
                                    <button type="button" class="layui-btn layui-btn-normal" STYLE="margin: 25px 84px;">
                                        点单
                                    </button>
                                </a>
                            </div>
                        </div>
                    </div>
                </c:if>

                <c:if test="${table.tableStatus == 2}">
                    <div class="layui-col-md2 out-container out-container-book">
                        <div class="inner-container inner-container-book">
                            <p>${table.tableName}</p><br>
                            <h1>${table.tableCode}</h1>
                            <p>预约人：${table.tableInfo.tableInfoBookName}</p>
                            <p>预约电话：${table.tableInfo.tableInfoBookPhone}</p>
                            <p>预约时间：${table.tableInfo.tableInfoBookTime}</p>
                        </div>
                        <div class="layui-col-md12 out-container-bg">
                            <div class="layui-btn-container">
                                <button class="layui-btn layui-btn-normal" STYLE="margin: 25px 84px;"
                                        onclick="x_admin_show('开台','${pageContext.request.contextPath}/foreground?m=setUpTablePage&tableId=${table.tableId}&tableCapacity=${table.tableCapacity}',450,450)">
                                    开台
                                </button>
                                <button class="layui-btn layui-btn-normal cancelBookBtn"
                                        STYLE="margin: 15px 84px;" value="${table.tableId}">取消预约
                                </button>
                            </div>
                        </div>
                    </div>
                </c:if>
            </c:if>
        </c:forEach>
    </div>
    <fieldset class="layui-elem-field layui-field-title">
        <legend>卡座</legend>
    </fieldset>
    <div class="layui-row layui-col-space5">
        <c:forEach items="${tableList}" var="table">
            <c:if test="${table.tableType == '卡座'}">
                <c:if test="${table.tableStatus == 0}">
                    <div class="layui-col-md2 out-container out-container-free">
                        <div class="inner-container inner-container-free">
                            <p>${table.tableName}</p><br>
                            <h1>${table.tableCode}</h1><br>
                            <p>容量：${table.tableCapacity}人</p>
                        </div>

                        <c:if test="${CanBook==true}">
                            <div class="layui-col-md12 out-container-bg">
                                <button class="layui-btn layui-btn-normal" STYLE="margin: 25px 84px;"
                                        onclick="x_admin_show('开台','${pageContext.request.contextPath}/foreground?m=setUpTablePage&tableId=${table.tableId}&tableCapacity=${table.tableCapacity}',450,450)">
                                    开台
                                </button>
                                <button class="layui-btn layui-btn-normal" STYLE="margin: 15px 84px;"
                                        onclick="x_admin_show('预约','${pageContext.request.contextPath}/foreground?m=bookTablePage&tableId=${table.tableId}&tableCapacity=${table.tableCapacity}',650,550)">
                                    预约
                                </button>
                            </div>
                        </c:if>

                        <c:if test="${CanBook==false}">
                            <div class="layui-col-md12 out-container-bg">
                                <button class="layui-btn layui-btn-normal" STYLE="margin: 56px 84px;"
                                        onclick="x_admin_show('开台','${pageContext.request.contextPath}/foreground?m=setUpTablePage&tableId=${table.tableId}&tableCapacity=${table.tableCapacity}',450,450)">
                                    开台
                                </button>
                            </div>
                        </c:if>

                    </div>
                </c:if>

                <c:if test="${table.tableStatus == 1}">
                    <div class="layui-col-md2 out-container out-container-busy">
                        <div class="inner-container inner-container-busy">
                            <p>${table.tableName}</p><br>
                            <h1>${table.tableCode}</h1><br>
                            <input type="hidden" class="tableInfoSetUpTime"
                                   value="${table.tableInfo.tableInfoSetupTime}">
                            <span class="totalTime"></span>
                        </div>
                        <div class="layui-col-md12 out-container-bg">
                            <div class="layui-btn-container">
                                <button type="button" class="layui-btn layui-btn-normal" STYLE="margin: 25px 84px;"
                                        onclick="x_admin_show('结账','${pageContext.request.contextPath}/foreground?m=payPage&tableId=${table.tableId}', 610)">
                                    结账
                                </button>
                                <a href="${pageContext.request.contextPath}/foreground?m=orderPage&tableId=${table.tableId}"
                                   target="_blank">
                                    <button type="button" class="layui-btn layui-btn-normal" STYLE="margin: 25px 84px;">
                                        点单
                                    </button>
                                </a>
                            </div>
                        </div>
                    </div>
                </c:if>

                <c:if test="${table.tableStatus == 2}">
                    <div class="layui-col-md2 out-container out-container-book">
                        <div class="inner-container inner-container-book">
                            <p>${table.tableName}</p><br>
                            <h1>${table.tableCode}</h1>
                            <p>预约人：${table.tableInfo.tableInfoBookName}</p>
                            <p>预约电话：${table.tableInfo.tableInfoBookPhone}</p>
                            <p>预约时间：${table.tableInfo.tableInfoBookTime}</p>

                        </div>
                        <div class="layui-col-md12 out-container-bg">
                            <div class="layui-btn-container">
                                <button class="layui-btn layui-btn-normal" STYLE="margin: 25px 84px;"
                                        onclick="x_admin_show('开台','${pageContext.request.contextPath}/foreground?m=setUpTablePage&tableId=${table.tableId}&tableCapacity=${table.tableCapacity}',450,450)">
                                    开台
                                </button>
                                <button class="layui-btn layui-btn-normal cancelBookBtn"
                                        STYLE="margin: 15px 84px;" value="${table.tableId}">取消预约
                                </button>
                            </div>
                        </div>
                    </div>
                </c:if>
            </c:if>
        </c:forEach>
    </div>
    <fieldset class="layui-elem-field layui-field-title">
        <legend>雅间</legend>
    </fieldset>
    <div class="layui-row layui-col-space5">
        <c:forEach items="${tableList}" var="table">
            <c:if test="${table.tableType == '雅间'}">
                <c:if test="${table.tableStatus == 0}">
                    <div class="layui-col-md2 out-container out-container-free">
                        <div class="inner-container inner-container-free">
                            <p>${table.tableName}</p><br>
                            <h1>${table.tableCode}</h1><br>
                            <p>容量：${table.tableCapacity}人</p>
                        </div>

                        <c:if test="${CanBook==true}">
                            <div class="layui-col-md12 out-container-bg">
                                <button class="layui-btn layui-btn-normal" STYLE="margin: 25px 84px;"
                                        onclick="x_admin_show('开台','${pageContext.request.contextPath}/foreground?m=setUpTablePage&tableId=${table.tableId}&tableCapacity=${table.tableCapacity}',450,450)">
                                    开台
                                </button>
                                <button class="layui-btn layui-btn-normal" STYLE="margin: 15px 84px;"
                                        onclick="x_admin_show('预约','${pageContext.request.contextPath}/foreground?m=bookTablePage&tableId=${table.tableId}&tableCapacity=${table.tableCapacity}',650,550)">
                                    预约
                                </button>
                            </div>
                        </c:if>

                        <c:if test="${CanBook==false}">
                            <div class="layui-col-md12 out-container-bg">
                                <button class="layui-btn layui-btn-normal" STYLE="margin: 56px 84px;"
                                        onclick="x_admin_show('开台','${pageContext.request.contextPath}/foreground?m=setUpTablePage&tableId=${table.tableId}&tableCapacity=${table.tableCapacity}',450,450)">
                                    开台
                                </button>
                            </div>
                        </c:if>

                    </div>
                </c:if>

                <c:if test="${table.tableStatus == 1}">
                    <div class="layui-col-md2 out-container out-container-busy">
                        <div class="inner-container inner-container-busy">
                            <p>${table.tableName}</p><br>
                            <h1>${table.tableCode}</h1><br>
                            <input type="hidden" class="tableInfoSetUpTime"
                                   value="${table.tableInfo.tableInfoSetupTime}">
                            <span class="totalTime"></span>
                        </div>
                        <div class="layui-col-md12 out-container-bg">
                            <div class="layui-btn-container">
                                <button type="button" class="layui-btn layui-btn-normal" STYLE="margin: 25px 84px;"
                                        onclick="x_admin_show('结账','${pageContext.request.contextPath}/foreground?m=payPage&tableId=${table.tableId}', 610)">
                                    结账
                                </button>
                                <a href="${pageContext.request.contextPath}/foreground?m=orderPage&tableId=${table.tableId}"
                                   target="_blank">
                                    <button type="button" class="layui-btn layui-btn-normal" STYLE="margin: 25px 84px;">
                                        点单
                                    </button>
                                </a>
                            </div>
                        </div>
                    </div>
                </c:if>

                <c:if test="${table.tableStatus == 2}">
                    <div class="layui-col-md2 out-container out-container-book">
                        <div class="inner-container inner-container-book">
                            <p>${table.tableName}</p><br>
                            <h1>${table.tableCode}</h1>
                            <p>预约人：${table.tableInfo.tableInfoBookName}</p>
                            <p>预约电话：${table.tableInfo.tableInfoBookPhone}</p>
                            <p>预约时间：${table.tableInfo.tableInfoBookTime}</p>
                        </div>
                        <div class="layui-col-md12 out-container-bg">
                            <div class="layui-btn-container">
                                <button class="layui-btn layui-btn-normal" STYLE="margin: 25px 84px;"
                                        onclick="x_admin_show('开台','${pageContext.request.contextPath}/foreground?m=setUpTablePage&tableId=${table.tableId}&tableCapacity=${table.tableCapacity}',450,450)">
                                    开台
                                </button>
                                <button class="layui-btn layui-btn-normal cancelBookBtn"
                                        STYLE="margin: 15px 84px;" value="${table.tableId}">取消预约
                                </button>
                            </div>
                        </div>
                    </div>
                </c:if>
            </c:if>
        </c:forEach>
    </div>


</div>

<script>

    function refresh() {
        nowtime = new Date();
        year = nowtime.getFullYear();
        month = nowtime.getMonth() + 1;
        date = nowtime.getDate();
        hour = nowtime.getHours();
        minute = nowtime.getMinutes();
        second = nowtime.getSeconds();
        if (month < 10) {
            month = "0" + month;
        }
        if (date < 10) {
            date = "0" + date;
        }
        if (hour < 10) {
            hour = "0" + hour
        }
        if (minute < 10) {
            minute = "0" + minute;
        }
        if (second < 10) {
            second = "0" + second;
        }
        nowt = year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
        bkt = year + "-" + month + "-" + date + " " + "19:00:02";
        afbkt = year + "-" + month + "-" + date + " " + "19:00:04";
        if (new Date(nowt) >= new Date(bkt) && new Date(nowt) < new Date(afbkt)) {
            location.replace(location.href);
        }
    }

    function showTime() {
        $(".totalTime").each(function (index, item) {
            var date = $(this).prev().val();
            date = date.substring(0, 19);
            date = date.replace(/-/g, '/');
            var timestamp = new Date(date).getTime();
            var nowTime = Date.parse(new Date());
            var min = parseInt((nowTime - timestamp) / 1000 / 60);
            $(this).text('已开台：' + min + '分钟');
        });
    }

    setInterval("showTime()", 500);
    setInterval("refresh()", 2000);
    layui.use(['table', 'form', 'element', 'jquery'], function () {
        $ = layui.jquery;

        $('.cancelBookBtn').on('click', function () {
            var tableId = $(this).val();
            layer.confirm('确认取消预约吗?', function (data) {
                $.ajax({
                    type: "post",
                    url: "${pageContext.request.contextPath}/foreground?m=cancelBookTable",
                    dataType: "json",
                    data: {tableId: tableId},
                    success: function (jsonData) {
                        layer.msg(jsonData.msg, function () {
                            if (jsonData.code === 200) {
                                layer.close(data);
                                location.replace(location.href);
                            }
                        });

                    }
                });
            });
        });

    });
</script>
</body>

</html>